<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约管理</title>
    <link rel="stylesheet" type="text/css" href="../../css/common/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/appointment/appointment.css">
    <link rel="stylesheet" type="text/css" href="../../plugin/datepockerRange/css/datepicker.css">
    <link rel="stylesheet" type="text/css" href="../../plugin/select/css/nice-select.css">
    <link rel="stylesheet" type="text/css" href="../../plugin/switchTab/css/responsive.tabs.css">
</head>
<style>

</style>

<body>
    <div id="appointment" class="lz-main">
        <ul class="tabs-list ts-list">
            <li class="active"><a>预约管理</a></li>
            <li><a>排班管理</a></li>
        </ul>
        <div class="ts-container">
            <div class="ts-content appointment-content">
                <div class="user-mess">
                    <div>
                        <form id="base-mess" class="lz-form">
                            <div>
                                <div class="lz-form-head">
                                    基本信息
                                </div>
                            </div>
                            <div class="lz-form-row">
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">姓名:</label>
                                    <input class="lz-form-item-input" type="text" autocomplete="off" data-bv="true" data-bv-require="true" data-bv-require-error="*必填项">
                                    <span class="lz-form-item-help"></span>
                                </div>
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">年龄:</label>
                                    <input class="lz-form-item-input" type="text" autocomplete="off" data-bv="true" data-bv-require="true" data-bv-require-error="*必填项">
                                    <span class="lz-form-item-help"></span>
                                </div>
                            </div>
                            <div class="lz-form-row">
                                <div class="lz-col-1 lz-form-item" style="float: right;">
                                    <label class="lz-form-item-label">出生日期:</label>
                                    <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
                                        <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                                        <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input only-date" value="">
                                    </div>
                                </div>
                                <div class="lz-col-1 lz-form-item" style="float: left;">
                                    <label class="lz-form-item-label">性别:</label>
                                    <!-- <input class="lz-form-item-input" type="text" data-bv="true" data-bv-require="true" data-bv-require-error="*必填项"> -->
                                    <select class="ap-select">
                                    <option value="0">请选择</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                                    <span class="lz-form-item-help"></span>
                                </div>

                            </div>
                            <div class="lz-form-row">
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">卡号:</label>
                                    <input class="lz-form-item-input" type="text" autocomplete="off" data-bv="true" data-bv-require="true" data-bv-require-error="*必填项">
                                    <span class="lz-form-item-help"></span>
                                </div>
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">手机号:</label>
                                    <input class="lz-form-item-input" type="text" autocomplete="off" data-bv="true" data-bv-require="true" data-bv-require-error="*必填项">
                                    <span class="lz-form-item-help"></span>
                                </div>
                            </div>
                        </form>
                        <form class="lz-form">
                            <div>
                                <div class="lz-form-head">
                                    预约信息
                                </div>
                            </div>
                            <div class="lz-form-row">
                                <div class="lz-col-1 lz-form-item" style="float: left;">
                                    <label class="lz-form-item-label">类型:</label>
                                    <select class="ap-select">
                                    <option value="0">请选择</option>
                                    <option value="1">初诊</option>
                                    <option value="2">复诊</option>
                                </select>
                                    <span class="lz-form-item-help"></span>
                                </div>
                                <div class="lz-col-1 lz-form-item" style="float: right;">
                                    <label class="lz-form-item-label">来源:</label>
                                    <select class="ap-select">
                                    <option value="0">请选择</option>
                                    <option value="1">网络咨询</option>
                                    <option value="2">朋友介绍</option>
                                    <option value="3">家住附近</option>
                                    <option value="4">诊所网站</option>
                                </select>
                                    <span class="lz-form-item-help"></span>
                                </div>
                            </div>
                            <div class="lz-form-row">
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">日期:</label>
                                    <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
                                        <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                                        <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input only-date" value="">
                                    </div>
                                </div>

                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">科室:</label>
                                    <select class="ap-select">
                                    <option value="0">请选择</option>
                                    <option value="1">全部</option>
                                    <option value="2">挂号室</option>
                                </select>
                                    <span class="lz-form-item-help"></span>
                                </div>
                            </div>
                            <div class="lz-form-row">
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">医生:</label>
                                    <input class="lz-form-item-input" autocomplete="off" type="text">
                                    <span class="lz-form-item-help"></span>
                                </div>
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">时间:</label>
                                    <input class="lz-form-item-input" autocomplete="off" type="text">
                                    <span class="lz-form-item-help"></span>
                                </div>
                            </div>
                            <div class="lz-form-row">
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">预约事项:</label>
                                    <input class="lz-form-item-input" autocomplete="off" type="text">
                                    <span class="lz-form-item-help"></span>
                                </div>
                            </div>
                            <div class="lz-form-row">
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">备注:</label>
                                    <input class="lz-form-item-input" autocomplete="off" type="text">
                                    <span class="lz-form-item-help"></span>
                                </div>
                            </div>
                        </form>
                        <form class="lz-form">
                            <div>
                                <div class="lz-form-head">
                                    其他信息
                                </div>
                            </div>
                            <div class="lz-form-row">
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">联系人:</label>
                                    <input class="lz-form-item-input" autocomplete="off" type="text">
                                    <span class="lz-form-item-help"></span>
                                </div>
                                <div class="lz-col-1 lz-form-item">
                                    <label class="lz-form-item-label">联系电话:</label>
                                    <input class="lz-form-item-input" autocomplete="off" type="text">
                                    <span class="lz-form-item-help"></span>
                                </div>
                            </div>
                            <div class="confirm">
                                <button type="button" class="lz-btn lz-btn-primary">确定预约</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="appointment-history">
                    <div id="date-tab" class="tabs">
                        <ul class="tabs-list">
                            <li class="active"><a href="javascript:;">日历</a></li>
                            <li><a href="javascript:;">列表</a></li>
                        </ul>
                        <div class="tabs-container">
                            <div class="tab-content" style="display:block;">
                                <h1>日历表格</h1>
                            </div>
                            <div class="tab-content">
                                <h1>列表表格</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ts-content arrange-content" style="display: none">
                <h1>排班表格</h1>
            </div>
        </div>
    </div>

    <script src="../../js/common/jquery/jquery-2.2.4.js"></script>
    <script src="../../plugin/bootstrapValidator/js/bootstrapValidator.js"></script>
    <script src="../../plugin/datepockerRange/js/moment.min.js"></script>
    <script src="../../plugin/datepockerRange/js/datepicker.all.js"></script>
    <script src="../../plugin/select/js/jquery.nice-select.min.js"></script>
    <script src="../../plugin/switchTab/js/responsive.tabs.js"></script>
    <script src="../../plugin/switchTab/js/re-tabs-simplify.js"></script>
    <script>
        $(function() {
            // 表单验证框架，此调用为示范，自行看源码扩展
            $('.ap-select').niceSelect();
            $('#date-tab').respTabs();
            $('#appointment').resTabsSimp();

            $('.J-datepicker-day').datePicker({
                hasShortcut: true,
                format: 'YYYY-MM-DD',
                shortcutOptions: [{
                    name: '今天',
                    day: '0'
                }, {
                    name: '昨天',
                    day: '-1'
                }, {
                    name: '一周前',
                    day: '-7'
                }]
            });
        });
    </script>

</body>

</html>